<template>
  <view class="container">
    <ve-form>
      <ve-card>
        <ve-form-item :label="modeLabel">
          <view>{{ modeValue }}</view>
        </ve-form-item>
        <ve-form-item label="备注信息" labelPosition="top" :borderBottom="false">
          <ve-input type="textarea" v-model="form.remark" placeholder="请输入备注信息" :maxlength="200" />
        </ve-form-item>
      </ve-card>
      <ve-bottom-box size="mini">
        <ve-button type="primary" size="long" :loading="okLoading" @click="handleSave">确认</ve-button>
      </ve-bottom-box>
    </ve-form>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { createRemarkApi, orderFeeAddRemark } from '@/api/order/sOrder'
  import { useLoadDataAndHotUpdateNavigateBack } from '@/hooks/useListNavigate'

  const form = ref({})
  const mode = ref(undefined)
  const modeLabel = ref('备注类型')
  const modeValue = ref('订单备注')
  const okLoading = ref(false)
  const handleSave = () => {
    okLoading.value = true
    let fn = !mode.value ? createRemarkApi : orderFeeAddRemark
    fn(form.value)
      .then((res) => {
        useLoadDataAndHotUpdateNavigateBack()
        uni.$emit('refreshData')
        uni.showToast({
          title: '添加备注成功',
          icon: 'none',
        })
      })
      .finally(() => {
        okLoading.value = false
      })
  }

  onLoad((record) => {
    form.value.id = record.id
    // 费用明细添加备注
    if (record.mode) {
      if (record.mode.includes(',')) {
        modeLabel.value = record.mode.split(',')[0]
        modeValue.value = record.mode.split(',')[1]
      }
      mode.value = record.mode
    }
    record.title && uni.setNavigationBarTitle({ title: record.title })
  })
</script>

<style lang="scss" scoped>
  page {
    background: #f7f8fa;
  }
  .container {
    height: auto;
    padding: 24rpx 24rpx;
    background: #f7f8fa;
  }
  :deep(.ve-textarea) {
    background: #eff0f2;
  }
</style>
